<template>
  <section>
    <Tabs>
      <TabPane label="交易总计" name="name1">
        <Form inline>
          <Form-item>
            <DatePicker v-model="dateVal" format="yyyy/MM/dd" type="daterange" placement="bottom-start"
                        :options="options"
                        placeholder="选择日期" style="width: 200px"
                        @on-change="handleSearch"></DatePicker>
          </Form-item>
        </Form>
        <Row>
          <Col :span="4">
          <div class="header">
            成功金额（元）<span>{{tradeStatistics.successAmt}}</span>
          </div>
          </Col>
          <Col :span="4">
          <div class="header">
            成功笔数（笔）<span>{{tradeStatistics.successCount}}</span>
          </div>
          </Col>
          <Col :span="4">
          <div class="header">
            失败金额（元）<span>{{tradeStatistics.failAmt}}</span>
          </div>
          </Col>
          <Col :span="4">
          <div id="weekAmount" class="header">
            失败笔数（笔）<span>{{tradeStatistics.failCount}}</span>
          </div>
          </Col>
          <Col :span="4">
          <div class="header">
            处理中金额（元）<span>{{tradeStatistics.processingAmt}}</span>
          </div>
          </Col>
          <Col :span="4">
          <div class="header">
            处理中笔数（笔）<span>{{tradeStatistics.processingCount}}</span>
          </div>
          </Col>
        </Row>
        <div class="chart-area">
          <div id="successChart" class="chart-content"></div>
        </div>
      </TabPane>
<!--      <TabPane label="开通步骤">
        <div class="step_item">
          <h3>开通支付通道(1-10天)</h3>
          <div class="step_content">
            <div class="step_desc">有支付参数？直接&nbsp;<a>配参数</a>。还未申请通道商户？由我们来&nbsp;<a>代申请</a>。</div>
            <div class="step_desc" style="display: none;">已进行 的申请，请耐心等待。您可以点击配参数继续进行其他通道的参数配置。</div>
            <div class="step_desc" style="display: none;">您的 申请通过， 申请未通过，请查看结果。</div>
            <div class="step_desc" style="display: none;">当前无申请中的通道。</div>
          </div>
        </div>
        <div class="step_item">
          <h3>公司资质认证(1~2天)</h3>
          <div class="step_content">
            <div class="step_desc">您的公司资质尚未提交认证，请完善&nbsp;<a>账户信息</a>。</div>
          </div>
        </div>
        <div class="step_item">
          <h3>发起真实成功交易(1天)</h3>
          <div class="step_content">
            <div class="step_desc" style="display: none">已开通 ，可以发起真实成功交易了。</div>
            <div class="step_desc">不可发起真实成功交易</div>
          </div>
        </div>
      </TabPane>-->
    </Tabs>
  </section>
</template>

<script>
  require('echarts/theme/macarons_1')
  import {mapState} from 'vuex'
  import echarts from 'echarts'
  import Model from '@/models/apps'
  import time from '@/utils/helpers/timeLite'
  export default {
    name: 'summary',
    data () {
      return {
        tradeStatistics: {
          successAmt: '0.00',
          successCount: 0,
          failAmt: '0.00',
          failCount: 0,
          processingAmt: '0.00',
          processingCount: 0
        },
        successChart: null,
        failChart: null,
        processingChart: null,
        dateVal: [new Date(), new Date()],
        options: {
          disabledDate (date) {
            return date.valueOf() > new Date().valueOf()
          },
          shortcuts: [
            {
              text: '今日',
              value () {
                const end = new Date()
                const start = new Date()
                return [start, end]
              }
            },
            {
              text: '最近一周',
              value () {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
                return [start, end]
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
                return [start, end]
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date()
                const start = new Date()
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
                return [start, end]
              }
            }
          ]
        },
        search: {
          beginDate: null,
          endDate: null
        }
      }
    },
    computed: mapState({
      'allApps': state => state.allApps,
      getCurrentApp (state) {
        return state.allApps.currentApp
      }
    }),
    watch: {
      getCurrentApp (val) {
        this.getTradeStatisticsInfo()
        this.drawLine()
      }
    },
    created () {
      this.init()
    },
    mounted: function () {
      this.drawLine()
    },
    methods: {
      init () {
        this.initSearch()
        this.getTradeStatisticsInfo()
      },
      getTradeStatisticsInfo () {
        new Model('getTradeStatisticsInfo')
          .GET({
            params: {
              appId: this.$route.params.id,
              ...this.search
            }
          })
          .then((res) => {
            this.tradeStatistics.processingCount = res.data.data.WAITING_PAYMENT.count
            this.tradeStatistics.processingAmt = res.data.data.WAITING_PAYMENT.amount
            this.tradeStatistics.successAmt = res.data.data.SUCCESS.amount
            this.tradeStatistics.successCount = res.data.data.SUCCESS.count
            this.tradeStatistics.failAmt = res.data.data.FAILED.amount
            this.tradeStatistics.failCount = res.data.data.FAILED.count
          })
      },
      initSearch () {
        this.search.beginDate = time.getDate(this.dateVal[0])
        this.search.endDate = time.getDate(this.dateVal[1])
      },
      handleSearch (val) {
        if (val[0] !== null && val[0] !== '') {
          // DatePicker 在change 事件后 dateVal 数据还木有改变，只能分开来写
          this.search.beginDate = time.getDate(time.getDate(val[0]))
          this.search.endDate = time.getDate(time.getDate(val[1]))
          this.getTradeStatisticsInfo()
          this.drawLine()
        }
      },
      drawLine () {
        this.successChart = echarts.init(document.getElementById('successChart'), 'macarons_1')
        new Model('ordersTrend')
          .GET({
            params: {
              appId: this.$route.params.id,
              status: 'SUCCESS',
              ...this.search
            }
          })
          .then((res) => {
            var arrayX = new Array(0)
            var arrayAmount = new Array(0)
            var arrayCount = new Array(0)
            for (var i = 0; i < res.data.length; i++) {
              if (this.search.beginDate === this.search.endDate) {
                arrayX.push(res.data[i].hour)
              } else {
                arrayX.push(res.data[i].day)
              }
              arrayAmount.push(res.data[i].totalAmount)
              arrayCount.push(res.data[i].count)
            }
            this.orderTrendOfWeekX = arrayX
            this.orderTrendOfWeekAmount = arrayAmount
            this.orderTrendOfWeekCount = arrayCount
            this.successChart.setOption(
              {
                title: {
                  show: true,
                  text: '成功交易订单走势',
                  x: 'center'
                },
                tooltip: {
                  trigger: 'axis'
                },
                calculable: true,
                legend: {
                  data: ['成功交易笔数', '成功交易额(元)'],
                  x: 'right'
                },
                grid: {
                  left: '3%',
                  right: '1%',
                  bottom: '3%',
                  containLabel: true
                },
                xAxis: [
                  {
                    type: 'category',
                    axisTick: {
                      alignWithLabel: true
                    },
                    data: this.orderTrendOfWeekX,
                    minInterval: 1
                  }
                ],
                yAxis: [
                  {
                    type: 'value',
                    name: '成功交易笔数',
                    axisLabel: {
                      formatter: '{value} 笔'
                    },
                    minInterval: 1
                  },
                  {
                    type: 'value',
                    name: '成功交易额(元)',
                    axisLabel: {
                      formatter: '{value} 元'
                    },
                    minInterval: 0.01
                  }
                ],
                series: [
                  {
                    name: '成功交易笔数',
                    type: 'bar',
                    data: this.orderTrendOfWeekCount
                  },
                  {
                    name: '成功交易额(元)',
                    type: 'line',
                    yAxisIndex: 1,
                    data: this.orderTrendOfWeekAmount
                  }
                ]
              }
            )
          })
      }
    }
  }
</script>

<style scoped>
  .step_content {
    font-size: 14px;
    line-height: 30px;
    padding: 10px 20px;
  }

  .header {
    font-size: 13px;
    width: 100%;
    height: 80px;
    padding-left: 20px;
    text-align: center;
    color: #999
  }

  .header span {
    display: block;
    font-size: 38px;
    color: #555;
    margin-top: 5px;
  }

  .chart-area {
    padding: 10px 0px;
  }

  .chart-area .chart-content {
    width: 100%;
    height: 400px;
    padding: 10px 0;
  }

</style>
